<template>
    <el-menu :style="{ width: isCollapse ? '64px' : '220px' }" active-text-color="#ffd04b" background-color="#545c64"
        class="aside-container" text-color="#fff" :collapse="isCollapse" :default-active="defaultActive">
        <p class="logo-lg">
            {{ isCollapse ? 'DIDI' : 'DIDI陪诊' }}
        </p>
        <!-- 菜单 -->
        <TreeMenu :menuData="menuData" />
    </el-menu>
</template>

<script setup name="Aside">

import { useMenuStore } from '@/stores/menu'
import { storeToRefs } from 'pinia'

import TreeMenu from '@/components/treeMenu.vue'
import { reactive, computed } from 'vue'
// 获取路由
import { useRoute } from 'vue-router'
// 创建路由实例
const route = useRoute()
const menuStore = useMenuStore()
const { isCollapse, routerList } = storeToRefs(menuStore)
const defaultActive = computed(() => route.path)

// 获取的是主布局（path: '/'）下的子路由数组
// const menuData = reactive(router.options.routes[0].children)
const menuData = reactive(routerList.value)

</script>

<style lang="less" scoped>
.aside-container {
    height: 100%;

    .logo-lg {
        font-size: 20px;
        height: 50px;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
}
</style>